<template>


  <el-row :gutter="20" style="margin-top: 10px">
    <el-col :span="5" style="text-align:center;">
      <div>{{ chooseData.remark }}</div>
      <div style="font-size: 5px;color: #4356a4; word-break:break-all">({{ chooseData.dictKey }})</div>
    </el-col>
    <el-col :span="8">
      <div>

        <el-select v-if="chooseData.styleType==='select'" v-model="chooseData.value" :disabled="typeInfo"
                   placeholder="请选择" size="mini">
          <el-option v-for="item in dataList" :key="item.value" :label="item.key"
                     :value="item.value"></el-option>
        </el-select>

        <el-input
            v-if="chooseData.styleType==='input'"
            placeholder="请输入内容"
            v-model="chooseData.value"
            size="mini"
            clearable
            :disabled="typeInfo"
        >
        </el-input>


        <el-input
            v-if="chooseData.styleType==='text'"
            type="textarea"
            size="mini"
            :rows="5"
            placeholder="请输入内容"
            v-model="chooseData.value"
            :disabled="typeInfo"
        >
        </el-input>

      </div>
    </el-col>
    <el-col :span="8">
      <el-button type="text" icon="el-icon-edit" @click="submit" :style="typeInfo?'':'color: #856d72'">
        {{typeInfo?'编辑':'取消'}}
      </el-button>
      <el-button type="text" icon="el-icon-upload el-icon--right" :disabled="typeInfo" @click="addOrUpdateDishesDict">
        提交
      </el-button>
    </el-col>
  </el-row>

</template>

<script>

import {commonSelect} from '../../api/CommonApi'
import {saveOrUpdateDishesDict} from '../../api/dictApi'

export default {
  props: ['apiPath', 'type', 'inputInfo'],
  name: "CommonDropDownBox",
  data() {
    return {
      dataList: [],
      chooseData: "",
      typeInfo: true,
      putType: '',
    }
  },
  methods: {
    submit() {
      console.log(this.chooseData)
      this.typeInfo=!this.typeInfo
    },
    selectList(res) {
      commonSelect(res, '').then(res => {
        this.dataList = res.data.dataList
      })
    },
    addOrUpdateDishesDict(){
      console.log(this.chooseData.value)
      saveOrUpdateDishesDict(this.chooseData).then(res=>{
        if (res.code===20000){
          this.$notify({title: '成功', message: '修改成功', type: 'success'});
          this.typeInfo=!this.typeInfo
        }
      })
    }
  },
  watch: {
    apiPath: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.selectList(newValue)
        }
      },
      deep: true,
      immediate: true
    },
    type: {
      handler(newValue, oldValue) {
        this.typeInfo = newValue
      },
      deep: true,
      immediate: true
    },
    inputInfo: {
      handler(newValue, oldValue) {
        console.log(newValue)
        this.chooseData = newValue
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>

</style>
